<template>
  <div>
      <!-- <h3>个人信息管理</h3> -->
    
    <!-- 
            头像
            昵称1
            生日1
            地址1
            座右铭
            寄语
            社交帐号
            照片墙
             -->
    <div class="form-box">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="编辑" style="text-align:left">
          <el-switch v-model="form.edit"></el-switch>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="form.nickyName" :disabled="!form.edit" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="生日" >
          <el-date-picker
            :disabled="!form.edit"
            type="date"
            placeholder="选择日期"
            v-model="form.date"
            style="width: 100%;"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.location" :disabled="!form.edit" maxlength="100"></el-input>
        </el-form-item>
        <el-form-item label="座右铭">
          <el-input
            v-model="form.motto"
            :disabled="!form.edit"
            type="textarea"
            maxlength="100"
            autosize
          ></el-input>
        </el-form-item>
        <el-form-item label="寄语">
          <el-input
            v-model="form.words"
            :disabled="!form.edit"
            type="textarea"
            autosize
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" :disabled="!form.edit"
            >提交</el-button
          >
          <el-button :disabled="!form.edit">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style scoped>
.form-box {
  padding: 20px;
}
</style>

<script>
export default {
  name: "MInfo",
  data() {
    return {
      form: {
        nickyName: "Sam",
        date: "1999-10-25",
        edit: false,
        location: "山东-济南-山东大学齐鲁软件学院",
        motto: "稳重，理性，努力",
        words:
          "过去都是假的，回忆是一条没有归途的路，以往的一切春天都无法复原，即使最狂乱且坚韧的爱情，归根结底也不过是一种瞬息即逝的现实，唯有孤独永恒。————百年孤独"
      }
    };
  },
  created:function(){
    //向后端请求数据
    var that=this;
    var qs=this.$qs;
    this.$http({
        url: "servlet/info",
        method: "post",
        transformRequest: [
          function(data) {//在请求之前对data传参进行格式转换
            data = qs.stringify(data);
            return data;
          }
        ],
        data: {
          funcType:0//0:grtINfo;1:changeInfo;2:likes
        },
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
        }
      }).then(
        function(res) {
          that.form.nickyName=res.data.nickyName;
          that.form.birthday=res.data.birthday;
          that.form.location=res.data.location;
          that.form.motto=res.data.motto;
          that.form.words=res.data.words;
        },
        function(res) {
          console.log(res);
          console.log("Minfo-getInfo出错");
        }
      );
  },
  methods: {
    onSubmit() {
      //向后端请求数据
    var that=this;
    var qs=this.$qs;
    this.$http({
        url: "servlet/info",
        method: "post",
        transformRequest: [
          function(data) {//在请求之前对data传参进行格式转换
            data = qs.stringify(data);
            return data;
          }
        ],
        data: {
          funcType:1,//0:grtINfo;1:changeInfo;2:likes
          nickyName:that.form.nickyName,
          birthday:that.form.birthday,
          location:that.form.location,
          motto:that.form.motto,
          words:that.form.words
        },
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
        }
      }).then(
        function(res) {
          that.form.edit=!that.form.edit;
        },
        function(res) {
          console.log(res);
          console.log("Minfo-getInfo出错");
        }
      );
    }
  }
};
</script>